<template>
  <view class="page">
    <Nav title="用药兑水"></Nav>
    <view class="tabs">
      <view
        class="tabs-item"
        :class="{ 'tabs-item-active': tabs_index == index }"
        @click="onChangeTabs(index)"
        v-for="(item, index) in tabs"
        :key="{ index }"
      >
        {{ item.name }}
      </view>
    </view>
    <view class="input-wrapper">
      <view class="input-wrapper-item" style="border-bottom: 1px solid #e5e5e5">
        <view class="input-wrapper-item-text">稀释倍数(倍)</view>
        <input
          class="input-wrapper-item-input"
          placeholder="输入稀释倍数"
          placeholderStyle="color:#999999"
        />
      </view>
      <view class="input-wrapper-item">
        <view class="input-wrapper-item-text">兑水量(斤)</view>
        <input
          class="input-wrapper-item-input"
          placeholder="输入兑水量"
          placeholderStyle="color:#999999"
        />
      </view>
    </view>
    <button class="btn">
      <text class="btn-text" style="color: #fff"> 计算 </text>
    </button>
    <view class="hint">
      <view class="hint-title">温馨提示：</view>
      <view class="hint-item">
        ·稀释倍数：可在药肥包装上查找，或咨询专业人士；
      </view>
      <view class="hint-item"> ·兑水量：可根据实际用药面积来确定兑水量； </view>
      <view class="hint-item"> ·计算结果为业内经验所得，结果仅供参考； </view>
    </view>
  </view>
</template>

<script>
import Nav from "@/components/nav.vue";
export default {
  components: {
    Nav,
  },
  data() {
    return {
      tabs: [
        {
          name: "用药量计算",
        },
        {
          name: "兑水量计算",
        },
      ],
      tabs_index: 0,
    };
  },
  onLoad() {},
  methods: {
    onChangeTabs(index) {
      this.tabs_index = index;
    },
  },
};
</script>

<style lang="scss" scoped>
.page {
  width: 100%;
  position: relative;
  background: #f6f6f6;
  min-height: 100vh;
  padding-bottom: 80rpx;
}
.tabs {
  display: flex;
  flex-direction: row;
  height: 96rpx;
  margin-bottom: 18rpx;
  &-item {
    width: 50%;
    height: 100%;
    line-height: 96rpx;
    font-size: 28rpx;
    color: #1ac678;
    text-align: center;
    background: #fff;
  }
  &-item-active {
    background: #1ac678;
    border-radius: 14rpx 14rpx 14rpx 14rpx;
    color: #fff;
  }
}
.input-wrapper {
  background: #fff;
  padding: 0 30rpx;
  margin-bottom: 81rpx;
  &-item {
    display: flex;
    flex-direction: row;
    align-items: center;
    padding: 53rpx 0;
    &-text {
      font-size: 26rpx;
      color: #202020;
      margin-right: 30rpx;
    }
    &-input {
      flex: 1;
      font-size: 26rpx;
      text-align: right;
      color: #202020;
    }
  }
}
.btn {
  width: 697rpx;
  background: #1ac678;
  border-radius: 54rpx;
  margin: 0 auto 85rpx;
  &-text {
    font-size: 32rpx;
    font-weight: 400;
    color: #ffffff;
  }
}
.hint {
  padding: 0 35rpx;
  &-title {
    font-size: 26rpx;
    color: #202020;
    margin-bottom: 21rpx;
  }
  &-item {
    font-size: 21rpx;
    color: #8d8d8d;
    line-height: 34rpx;
  }
}
</style>
